<template>
  <!-- 扫码登录 -->
  <div class="code-container">
    <div class="code" v-loading="loading">
      <img :src="qrUrl" alt="" style="width: 200px" />
      <i class="mask" v-if="showqrMask" :style="maskBg" @click="updateQr"></i>
    </div>
    <div class="scan">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <b>微信扫码登录</b>
    </div>
  </div>
</template>
<script>
//引入socket.io
import socketIo from "socket.io-client";
// 引入qrcode
import qrcode from "qrcode";
// 引入api
import * as api from "@/api/users";
// 引入失败遮罩图片
import invalidImg from "@/assets/img/invalidQr.png";
import successIMg from "@/assets/img/scancode.png";
import storage from "@/utils/storage";
export default {
  //存储用户信息 token permission
  props: {
    storageUserInfo: {
      required: true,
    },
  },
  data() {
    return {
      // 二维码图片
      qrUrl: "",
      // 是否显示遮罩
      showqrMask: false,
      // 遮罩背景样式
      maskBg: "",
      loading: false, //加载动画
    };
  },
  created() {
    //建立socket 连接
    let io = socketIo("wss://chst.vip");
    //监听连接的事件
    io.on("connectSuccess", ({ sid }) => {
      // 将sid存入到本地
      storage.set("qf-sid", sid);
      console.log(sid);
      //请求二维码地址
      this.getQrUrl(sid);
    });
    // 无效的二维码
    io.on("invalidCode", (data) => {
      console.log(data);
      this.showqrMask = true;
      this.maskBg = { backgroundImage: `url(${invalidImg})` };
    });
    // 扫码成功
    io.on("scancodeSuccess", async ({ state, wechatCode, msg }) => {
      if (state) {
        let res = await api.wechatLoginApi(wechatCode);
        console.log(res);
        // 扫码成功显示遮罩
        this.showqrMask = true;
        this.maskBg = { backgroundImage: `url(${successIMg})` };
        //将内容存储到本地
        this.storageUserInfo(res.data);
        // 跳转页面
        this.$router.push("/");
      } else {
        console.error(msg);
      }
    });
  },
  methods: {
    //封装一个请求获取二维码地址
    async getQrUrl(sid) {
      // 打开加载动画
      this.loading = true;
      let res = await api.getqrCodeApi(sid);
      let { scanCodeUrl: qrcodeUrl } = res.data;
      qrcode.toDataURL(qrcodeUrl, (err, img) => {
        if (err) {
          throw err;
        }
        // console.log(img);
        this.qrUrl = img;
        // 关掉遮罩
        this.showqrMask = false;
        //关闭加载动画
        this.loading = false;
      });
    },

    // 更新二维码地址
    updateQr() {
      let sid = storage.get("qf-sid");
      console.log(sid);
      this.getQrUrl(sid);
    },
  },
};
</script>
<style scoped lang="less">
.code-container {
  .code {
    width: 200px;
    height: 200px;
    margin: auto;
    position: relative;
    .mask {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 225, 255, 0.6);
      position: absolute;
      left: 0px;
      cursor: pointer;
    }
  }
  .scan {
    margin-top: 50px;
    text-align: center;
    color: white;
  }
  .icon {
    font-size: 24px !important;
    margin-right: 10px;
    vertical-align: middle;
  }
}
</style>
